import * as React from 'react';

import {
  CheckboxField,
  ExpanderProps,
  SelectField,
  Flex,
} from '@aws-amplify/ui-react';

export interface ExpanderPropControlsProps extends ExpanderProps {
  setType: (value: React.SetStateAction<ExpanderProps['type']>) => void;
  setIsCollapsible: (
    value: React.SetStateAction<ExpanderProps['isCollapsible']>
  ) => void;
}

export const ExpanderPropControls: React.FC<ExpanderPropControlsProps> = ({
  type,
  setType,
  isCollapsible,
  setIsCollapsible,
}) => {
  return (
    <Flex direction="column">
      <SelectField
        label="type"
        value={type}
        onChange={(event) =>
          setType(event.target.value as ExpanderProps['type'])
        }
      >
        <option value="single">single</option>
        <option value="multiple">multiple</option>
      </SelectField>
      {type === 'single' ? (
        <CheckboxField
          name="collapsible"
          checked={isCollapsible}
          value="yes"
          onChange={(event) => setIsCollapsible(event.target.checked)}
          label="isCollapsible"
        />
      ) : null}
    </Flex>
  );
};